<template>
  <div class="card-view">
    <el-row :gutter="16">
      <el-col 
        v-for="transaction in transactions" 
        :key="transaction.id"
        :xs="24" :sm="12" :md="8" :lg="6"
      >
        <el-card class="transaction-card">
          <template #header>
            <div class="card-header">
              <span class="transaction-id" @click="handleCardClick(transaction)">{{ truncateText(transaction.transactionId, 15) }}</span>
              <el-tag 
                :type="getDataSourceType(transaction.dataSource)"
                size="small"
              >
                {{ getDataSourceText(transaction.dataSource) }}
              </el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="amount-section" @click="handleCardClick(transaction)">
              <span 
                class="amount" 
                :class="{ 'income': transaction.amount > 0, 'expense': transaction.amount < 0 }"
              >
                {{ formatCurrency(transaction.amount) }}
              </span>
            </div>
            <div class="payer-section" @click="handleCardClick(transaction)">
              <div class="payer-name">{{ transaction.payerName }}</div>
              <div class="transaction-date">{{ formatDate(transaction.transactionDate) }}</div>
            </div>
            <div class="status-section">
              <el-tag 
                :type="getMatchStatusType(transaction.matchStatus)"
                size="small"
                @click="handleMatchStatusClick(transaction)"
              >
                {{ getMatchStatusText(transaction.matchStatus) }}
              </el-tag>
              <el-tag 
                :type="transaction.isFiltered ? 'warning' : 'info'"
                size="small"
              >
                {{ transaction.isFiltered ? '已过滤' : '正常' }}
              </el-tag>
            </div>
            <div class="card-actions">
              <el-button 
                type="primary" 
                size="small" 
                link
                :icon="icons.View"
                @click="handleCardClick(transaction)"
              >
                详情
              </el-button>
              <el-button 
                v-if="!transaction.isFiltered && !transaction.matchedOrder"
                type="success" 
                size="small" 
                link
                :icon="icons.Connection"
                @click="handleManualMatch(transaction)"
              >
                手动匹配
              </el-button>
              <el-button 
                type="warning" 
                size="small" 
                link
                :icon="icons.Edit"
                @click="handleEdit(transaction)"
              >
                编辑
              </el-button>
              <el-dropdown @command="(command: string) => handleMoreAction(command, transaction)">
                <el-button type="info" size="small" link :icon="icons.More" />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item 
                      command="filter" 
                      :icon="icons.Filter"
                      v-if="!transaction.isFiltered"
                    >
                      标记过滤
                    </el-dropdown-item>
                    <el-dropdown-item 
                      command="unfilter" 
                      :icon="icons.CircleCheck"
                      v-else
                    >
                      取消过滤
                    </el-dropdown-item>
                    <el-dropdown-item command="duplicate" :icon="icons.CopyDocument">
                      标记重复
                    </el-dropdown-item>
                    <el-dropdown-item command="export" :icon="icons.Download">
                      导出单条
                    </el-dropdown-item>
                    <el-dropdown-item 
                      command="delete" 
                      :icon="icons.Delete"
                      divided
                    >
                      删除流水
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { 
  View, Connection, Edit, More, CopyDocument, Delete, CircleCheck,
  Filter, Check
} from '@element-plus/icons-vue'
import { Download } from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps<{
  transactions: any[]
  getDataSourceType: Function
  getDataSourceText: Function
  getMatchStatusType: Function
  getMatchStatusText: Function
  formatCurrency: Function
  formatDate: Function
  truncateText: Function
  icons: Object
}>()

// 图标对象
const icons = {
  View,
  Connection,
  Edit,
  More,
  CopyDocument,
  Delete,
  CircleCheck,
  Filter,
  Check,
  Download
}

// 定义事件
const emit = defineEmits<{
  (e: 'card-click', transaction: any): void
  (e: 'match-status-click', transaction: any): void
  (e: 'manual-match', transaction: any): void
  (e: 'edit', transaction: any): void
  (e: 'more-action', command: string, transaction: any): void
}>()

// 方法
const handleCardClick = (transaction: any) => {
  emit('card-click', transaction)
}

const handleMatchStatusClick = (transaction: any) => {
  emit('match-status-click', transaction)
}

const handleManualMatch = (transaction: any) => {
  emit('manual-match', transaction)
}

const handleEdit = (transaction: any) => {
  emit('edit', transaction)
}

const handleMoreAction = (command: string, transaction: any) => {
  emit('more-action', command, transaction)
}
</script>

<style scoped lang="scss">
.card-view {
  .el-col {
    margin-bottom: 16px;
  }
  
  .transaction-card {
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .transaction-id {
        font-family: 'Monaco', 'Consolas', monospace;
        font-size: 14px;
        font-weight: 500;
      }
    }
    
    .card-content {
      .amount-section {
        margin-bottom: 12px;
        
        .amount {
          font-size: 18px;
          font-weight: 600;
          
          &.income {
            color: #52c41a;
          }
          
          &.expense {
            color: #f5222d;
          }
        }
      }
      
      .payer-section {
        margin-bottom: 12px;
        
        .payer-name {
          font-weight: 500;
          margin-bottom: 4px;
        }
        
        .transaction-date {
          font-size: 12px;
          color: #909399;
        }
      }
      
      .status-section {
        display: flex;
        gap: 8px;
      }
      
      .card-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #f0f0f0;
        
        // 移动端适配
        @media (max-width: 767px) {
          flex-wrap: wrap;
          
          .el-button {
            flex: 1;
            min-width: 60px;
          }
        }
      }
    }
  }
}
</style>